---
title: SegmentedControl
description: "`SegmentedControl`は、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。"
storybook: components-segmentedcontrol--basic
source: components/segmented-control
style: components/segmented-control/segmented-control.style.ts
---

```tsx preview
<SegmentedControl.Root defaultValue="ハチワレ">
  <SegmentedControl.Item value="ハチワレ">ハチワレ</SegmentedControl.Item>
  <SegmentedControl.Item value="うさぎ">うさぎ</SegmentedControl.Item>
  <SegmentedControl.Item value="モモンガ">モモンガ</SegmentedControl.Item>
</SegmentedControl.Root>
```

## 使い方

:::code-group

```tsx [package]
import { SegmentedControl } from "@yamada-ui/react"
```

```tsx [alias]
import { SegmentedControl } from "@/components/ui"
```

```tsx [monorepo]
import { SegmentedControl } from "@workspaces/ui"
```

:::

```tsx
<SegmentedControl.Root>
  <SegmentedControl.Item />
</SegmentedControl.Root>
```

### itemsを使う

```tsx preview functional
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return <SegmentedControl.Root defaultValue="ハチワレ" items={items} />
```

### サイズを変更する

```tsx preview functional
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <For each={["sm", "md", "lg", "xl"]}>
      {(size) => (
        <SegmentedControl.Root
          key={size}
          size={size}
          defaultValue="ハチワレ"
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### 方向を変更する

```tsx preview functional
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <For each={["horizontal", "vertical"]}>
      {(orientation) => (
        <SegmentedControl.Root
          key={orientation}
          defaultValue="ハチワレ"
          items={items}
          orientation={orientation}
        />
      )}
    </For>
  </VStack>
)
```

### 丸くする

```tsx preview functional
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <SegmentedControl.Root defaultValue="ハチワレ" fullRounded items={items} />
)
```

### 無効にする

```tsx preview functional
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <SegmentedControl.Root defaultValue="ハチワレ" disabled items={items} />

    <SegmentedControl.Root defaultValue="ハチワレ">
      <SegmentedControl.Item value="ハチワレ">ハチワレ</SegmentedControl.Item>
      <SegmentedControl.Item disabled value="うさぎ">
        うさぎ
      </SegmentedControl.Item>
      <SegmentedControl.Item value="モモンガ">モモンガ</SegmentedControl.Item>
    </SegmentedControl.Root>
  </VStack>
)
```

### 読み取り専用にする

```tsx preview functional
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <SegmentedControl.Root defaultValue="ハチワレ" items={items} readOnly />

    <SegmentedControl.Root defaultValue="ハチワレ">
      <SegmentedControl.Item value="ハチワレ">ハチワレ</SegmentedControl.Item>
      <SegmentedControl.Item readOnly value="うさぎ">
        うさぎ
      </SegmentedControl.Item>
      <SegmentedControl.Item value="モモンガ">モモンガ</SegmentedControl.Item>
    </SegmentedControl.Root>
  </VStack>
)
```

### 制御する

```tsx preview functional client
const [value, setValue] = useState("ハチワレ")
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return <SegmentedControl.Root items={items} value={value} onChange={setValue} />
```

## Props

<PropsTable name="segmented-control" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
